﻿<template>
<el-row>
  <el-form label-width="100px" :model="form" ref="form" :rules="rules" :disabled="show" :class="show ? 'disabled' : ''" size="small">
    <el-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
      <el-form-item label="账户类型：" required>
        <el-button :class="form.bank_account_type === 100 ? 'el-button--warning' : ''" 
        size="small" v-if="merchantType !== 300" 
        @click="form.bank_account_type = 100;form.leader_type = 1;form.bank_id_card_type = ''; form.bank_id_card_no='';form.bank_id_card_addr=''
        form.bank_certi = '';form.bank_head='';form.leader_id_1='';
        form.leader_id_2='';form.leader_id_3=''; form.bank_certi_inhand=''; form.bank_card ='' ">对公</el-button>

        <el-button :class="form.bank_account_type === 200 ? 'el-button--warning' : ''" 
        size="small" @click="form.bank_account_type = 200;form.bank_branch_code = '';form.bank_permit = ''">对私</el-button>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="负责人类型：" required>
        <el-button size="small" :class="form.leader_type === 1 ? 'el-button--warning' : ''" @click="form.leader_type = 1;form.bank_certi = '';
        form.bank_card_inhand='';form.leader_id_1='';form.leader_id_2='';form.leader_id_3=''; form.bank_certi_inhand=''">法人</el-button>
        <el-button size="small" :class="form.leader_type === 0 ? 'el-button--warning' : ''" v-if="form.bank_account_type === 200 && merchantType !== 300" 
        @click="form.leader_type = 0;form.bank_card='';form.bank_head='';">非法人</el-button>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="户名：" prop="bank_account_name">
        <el-input class="w240" v-model="form.bank_account_name"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="银行卡号：" prop="bank_account_no">
        <el-input class="w240" v-model="form.bank_account_no"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="开户行：" prop="bank_code">
        <el-select placeholder="请输入开户行关键字" v-model="form.bank_code" class="w240" filterable remote :remote-method="handleBankNameMethod" :loading="banksLoading">
          <el-option v-for="item in banks" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <!-- <el-form-item label="开户行支行：" prop="bank_branch_name" v-if="form.leader_type === 0">
        <el-input placeholder="请输入完整支行名称" class="w240" v-model="form.bank_branch_name"></el-input>
      </el-form-item> -->
      <el-form-item label="开户行支行：" prop="bank_branch_code">
        <el-select placeholder="" v-model="form.bank_branch_code" class="w240" filterable remote :remote-method="handleRemoteMethod" :loading="remoteLoading">
          <el-option v-for="item in sub_banks" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="开户行地址："  prop="bank_address">
        <el-cascader placeholder="-请选择省市区-" :options="options" :props="props" class="w240" v-model="form.bank_address"></el-cascader>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="预留手机号：" prop="bank_pre_mobile">
        <el-input class="w240" v-model="form.bank_pre_mobile" maxlength="11"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" v-if="form.bank_account_type === 200">
      <el-form-item label="证件类型：" prop="bank_id_card_type">
        <el-select v-model="form.bank_id_card_type" placeholder="" class="w240">
          <el-option v-for="item in option"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24" v-if="form.bank_account_type === 200">
      <el-form-item label="证件编号：" prop="bank_id_card_no">
        <el-input class="w240" v-model="form.bank_id_card_no"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24" v-if="form.bank_account_type === 200">
      <el-form-item label="证件地址：" prop="bank_id_card_addr">
        <el-input placeholder="" v-model="form.bank_id_card_addr" class="w240"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24" v-if="form.bank_account_type === 200">
      <el-form-item label="证件有效期：" prop="bank_id_card_expire">
        <el-date-picker class="w240" value-format="yyyy-MM-dd" v-model="form.bank_id_card_expire" placeholder="永久"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <el-form-item label="图片上传：">
        <span class="fz12 err">图片上传大小不超过1M</span>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <label class="el-form-item__label" style="width: 100px;">证件照片：</label>
        
          <el-form-item style="display:inline-block" label-width="0" prop="bank_card" class="mr10" v-if="form.bank_account_type === 200">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccBankCard">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.bank_card" :src="form.bank_card" alt="">
              <span class="err">*</span>
              <span class="fz12">银行卡正面</span>
            </el-upload>
          </el-form-item>
        
        
          <el-form-item style="display:inline-block" label-width="0" prop="bank_permit" class="mr10" v-if="form.bank_account_type === 100">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccBankPermit">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.bank_permit" :src="form.bank_permit" alt="">
              <span class="err">*</span>
              <span class="fz12">开户许可证</span>
            </el-upload>
          </el-form-item>
        
      
          <el-form-item style="display:inline-block" label-width="0" prop="leader_id_1" class="mr10" v-if="form.leader_type === 0">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccFacade">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_1" v-if="form.leader_id_1" alt="">
              <span class="err">*</span>
              <span class="fz12">身份证正面照</span>
            </el-upload>
          </el-form-item>
        
          <el-form-item style="display:inline-block" label-width="0" prop="leader_id_2" class="mr10" v-if="form.leader_type === 0">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccNegative">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_2" v-if="form.leader_id_2" alt="">
              <span class="err">*</span>
              <span class="fz12">身份证反面照</span>
            </el-upload>
          </el-form-item>
        
          <el-form-item style="display:inline-block" label="" label-width="0" class="mr10" v-if="form.leader_type === 0">
            <el-upload :action="url" class="uploader" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccLeadHead">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img :src="form.leader_id_3" v-if="form.leader_id_3" alt="">
              <span class="err" v-if="merchantType === 300">*</span>
              <span class="fz12">手持身份证照</span>
            </el-upload>
          </el-form-item>
        
          <!-- <el-form-item style="display:inline-block" label-width="0" prop="bank_certi" class="mr10" v-if="form.bank_account_type === 200 && form.leader_type === 0">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccBankCerti">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.bank_certi" :src="form.bank_certi" alt="">
              <span class="fz12"><span class="err">*</span>授权书</span>
            </el-upload>
          </el-form-item>
       
          <el-form-item style="display:inline-block" label-width="0" prop="bank_certi_inhand" class="mr10" v-if="form.bank_account_type === 200 && form.leader_type === 0">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccbankCardInhand">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.bank_certi_inhand" :src="form.bank_certi_inhand" alt="">
              <el-tooltip content="新大陆需要传" placement="bottom" effect="dark">
                <span class="fz12">授权协议手持合照</span>
              </el-tooltip>
            </el-upload>
          </el-form-item> -->
       
          <el-form-item style="display:inline-block" label-width="0" prop="bank_head" class="mr10" v-if="form.bank_account_type === 200 && form.leader_type === 1">
            <el-upload class="uploader" :action="url" :show-file-list="false" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccBankHead">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="form.bank_head" :src="form.bank_head" alt="">
              <span class="fz12">手持银行卡正面照</span>
            </el-upload>
          </el-form-item>
        
    </el-col>
  </el-form>
  <el-col :span="24" :offset="1">
    <el-button v-if="!show" type="primary" size="small" @click="handleCilckSubmit" :loading="loading" :disabled="disabled">提交审核</el-button>
    <el-button v-if="!show" type="info" size="small" @click="show = true" >取消编辑</el-button>
    <el-button v-if="show" type="primary" size="small" @click="show = false" >编辑资料</el-button>
  </el-col>
</el-row>
</template>

<script>
import { merchantBankUpdate, areaAddress, remoteMethodQuery, GetSearchBankList } from '@/api/shop'
import { mapGetters } from 'vuex'
import { validatePhone, validateIdentity, validateNumber } from '@/utils/validate'

export default {
  data() {
    const validPhone = (rule, value, callback) => {
      if (value !== '' && validatePhone(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式不对哦~'))
      }
    }
    const validBank = (rule, value, callback) => {
      if (value !== '' && validateNumber(value)) {
        callback()
      } else {
        callback(new Error('银行卡号格式不对哦~'))
      }
    }
    const validCard = (rule, value, callback) => {
      if (value !== '' && validateIdentity(value)) {
        callback()
      } else {
        callback(new Error('身份证号码格式不对哦~'))
      }
    }
    return {
      options: [],
      sub_banks: [],
      banks: [],
      option: [{
        id: 1,
        name: '身份证'
      }],
      show: true,
      loading: false,
      disabled: false,
      banksLoading: false,
      remoteLoading: false,
      url: process.env.BASE_API + '/merchant/uploadCommer',
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      },
      form: {
        bank_account_name: '', // 银行户名
        leader_type: null, // 负责人类型
        bank_account_no: '', // 银行卡号
        bank_code: '', // 开户行
        leader_id_1: '',
        leader_id_2: '',
        leader_id_3: '',
        bank_branch_name: '', // 开户行支行
        bank_certi_inhand: '', // 非法人账户授权书合照（照片）
        bank_branch_code: '', // 对公支行
        bank_account_type: '', // 账户类型
        bank_address: [], // 开户行地址
        bank_pre_mobile: '', // 银行预留手机号
        bank_permit: '', // 开户许可证（照片）
        bank_certi: '', // 非法人账户授权书（照片）
        bank_head: '', // 银行卡正面照
        bank_card: '', // 银行卡面 （照片）
        bank_id_card_type: '', // 对私必传 开户人证件类型
        bank_id_card_no: '', // 对私必传开户人身份证号
        bank_id_card_addr: '', // 对私必传开户人地址
        bank_id_card_expire: ''
      },
      rules: {
        bank_account_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        bank_account_no: [{ required: true, trigger: 'blur', validator: validBank }],
        bank_code: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        bank_branch_name: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        bank_branch_code: [{ required: true, trigger: 'change', message: '必须填写哦~' }],
        bank_id_card_no: [{ required: true, trigger: 'blur', validator: validCard }],
        bank_id_card_addr: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        bank_address: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        bank_pre_mobile: [{ required: true, trigger: 'blur', validator: validPhone }],
        bank_id_card_type: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        bank_card: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_id_1: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        leader_id_2: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        bank_certi: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        // bank_card_inhand: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        bank_permit: [{ required: true, trigger: 'change', message: '必须上传哦~' }]
      }
    }
  },
  props: {
    data: {
      required: true,
      type: Object
    },
    merchantType: {
      required: true,
      type: Number
    },
    merchantNum: {
      required: true,
      type: String
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    handleCilckSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          merchantBankUpdate(this.merchantNum, this.id, this.form).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('账户资料提交成功，请耐心等待审核~')
              this.disabled = false
              this.loading = false
              this.show = true
              this.$emit('update')
            } else {
              this.$message.error(res.data.errorMsg)
              this.loading = false
            }
          })
        }
      })
    },
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleUploadSuccBankCard(file) {
      this.form.bank_card = file.result
    },
    handleUploadSuccBankPermit(file) {
      this.form.bank_permit = file.result
    },
    handleUploadSuccbankCardInhand(file) {
      this.form.bank_certi_inhand = file.result
    },
    handleUploadSuccFacade(file) {
      this.form.leader_id_1 = file.result
    },
    handleUploadSuccNegative(file) {
      this.form.leader_id_2 = file.result
    },
    handleUploadSuccLeadHead(file) {
      this.form.leader_id_3 = file.result
    },
    handleUploadSuccBankCerti(file) {
      this.form.bank_certi = file.result
    },
    handleUploadSuccBankHead(file) {
      this.form.bank_head = file.result
    },
    handleRemoteMethod(query) {
      if (query !== '' && query.length >= 4) {
        this.remoteLoading = true
        remoteMethodQuery(query).then(response => {
          this.sub_banks = response.data.result
          this.remoteLoading = false
        })
      }
    },
    handleBankNameMethod(query) {
      if (query && query.length >= 4) {
        this.banksLoading = true
        GetSearchBankList(query).then(response => {
          this.banks = response.data.result
          this.banksLoading = false
        })
      }
    }
  },
  created() {
    areaAddress().then(res => {
      this.options = res.data.result
    })
    this.$nextTick(() => {
      this.form.bank_account_type = this.data.bank_account_type
      this.form.leader_type = this.data.leader_type
      this.form.bank_account_name = this.data.bank_account_name
      this.form.bank_account_no = this.data.bank_account_no
      this.form.bank_name = this.data.bank_name
      this.form.bank_id_card_expire = this.data.bank_id_card_expire
      this.form.bank_branch_name = this.data.bank_branch_name
      this.form.bank_branch_code = this.data.bank_branch_code
      this.sub_banks = [{ value: this.data.bank_branch_code, label: this.data.bank_branch_name }]
      this.form.bank_code = this.data.bank_name_code
      this.banks = [{ value: this.data.bank_name_code, label: this.data.bank_name }]
      this.form.bank_pre_mobile = this.data.bank_pre_mobile
      this.form.bank_id_card_type = this.data.bank_id_card_type
      this.form.bank_id_card_no = this.data.bank_id_card_no
      this.form.bank_id_card_addr = this.data.bank_id_card_addr
      this.form.bank_address = this.data.bank_address.code
      if (this.data.photo.length !== 0) {
        // this.data.photo.hasOwnProperty('bank_certi') ? this.form.bank_certi = this.data.photo.bank_certi[0] : this.form.bank_certi = ''
        this.data.photo.hasOwnProperty('bank_permit') ? this.form.bank_permit = this.data.photo.bank_permit[0] : this.form.bank_permit = ''
        this.data.photo.hasOwnProperty('leader_id_3') ? this.form.leader_id_3 = this.data.photo.leader_id_3[0] : this.form.leader_id_3 = ''
        this.data.photo.hasOwnProperty('bank_card') ? this.form.bank_card = this.data.photo.bank_card[0] : this.form.bank_card = ''
        // this.data.photo.hasOwnProperty('bank_certi_inhand') ? this.form.bank_certi_inhand = this.data.photo.bank_certi_inhand[0] : this.form.bank_card_inhand = ''
        this.data.photo.hasOwnProperty('bank_idcard_2') ? this.form.leader_id_2 = this.data.photo.bank_idcard_2[0] : this.form.leader_id_2 = ''
        this.data.photo.hasOwnProperty('bank_idcard_1') ? this.form.leader_id_1 = this.data.photo.bank_idcard_1[0] : this.form.leader_id_1 = ''
        this.data.photo.hasOwnProperty('bank_card_inhand') ? this.form.bank_head = this.data.photo.bank_card_inhand[0] : this.form.bank_head = ''
      }
    })
  }
}
</script>
